<template>
<!-- 预约信息详情 -->
    <div>
         <!-- 头部 -->
         <div class="frist_show">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/appointment' }">体检类型</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/physical/' + this.$route.params.num }">体检套餐</el-breadcrumb-item>
              <el-breadcrumb-item>预约体检</el-breadcrumb-item>
            </el-breadcrumb>
          <el-divider></el-divider>
        </div>
        <!-- 头部 广告处 -->
        <div style="width:800px;position: absolute;left:380px;height:450px;top:100px">
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in img" :key="item.id">
                  <img :src="item.name" style="width:800px;height:400px">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 中间部分 -->
        <div id="helld">
            <div class="helld-first">
                <div>
                    <h4>{{subscribe.besSmName}}</h4>
                    <p style="color:darkgrey">该套餐共<span>{{shu}}</span>项检查项</p>
                    <button style="margin-top:15px;margin-right:15px;color:#ea5504;border:1px solid orange;width:80px;background: white;font-size: 13px;border-radius: 5px;">{{subscribe.besSmApply}}</button>
                    <button style="margin-top:15px;margin-right:15px;color:#ea5504;border:1px solid orange;width:110px;background: white;font-size: 13px;border-radius: 5px;">{{subscribe.besSmAge}}</button>
                    <span style="color:red;position: absolute;top:76px;right:50px;font-size:30px">￥{{subscribe.besSmPrice}}元</span>
                </div>
                <el-divider></el-divider>
            </div>
            <!-- 预约须知 -->
            <div class="helld-fast" @click="yuyue">
              <svg class="icon myIcomp" aria-hidden="true" style="font-size:20px;margin-right:10px">
                <use :xlink:href="tingzhengqi"></use>
              </svg><span style="margin-right:1200px">预约须知</span>
               <svg class="icon myIcomp" aria-hidden="true" style="font-size:20px;margin-right:10px">
                <use xlink:href="#icon-jiantouyou"></use>
              </svg>
            </div>
            <!-- 套餐详情 -->
            <div class="helld-last">
                <div v-if="param">
                    <svg class="icon myIcomp" aria-hidden="true" style="font-size:20px;position: absolute;top: 48px;left: 110px;">
                      <use :xlink:href="taocan"></use>
                    </svg><span>套餐详情</span>
                    <svg class="icon myIcomp" aria-hidden="true" style="font-size:20px;position: absolute;top: 48px;left: 1280px;">
                      <use xlink:href="#icon-shu"></use>
                    </svg><span class="liji" style="font-size:20px;position: absolute;top: 45px;left: 1310px;cursor: pointer;" @click="show">立即预约</span>
                </div>
            </div>
            <!-- 小项目 -->
            <div class="helld-mo">
                <div>
                    <package v-if="param" @func="show"></package>
                    <examination v-else class="helld-mo-from"></examination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Package from './Package.vue'
import Examination from './Examination.vue'
import '../assets/icon/iconfont/iconfont.js'
export default {
  name: 'Subscribe',
  data () {
    return {
      param: true,
      mid: this.$route.params.id,
      bid: this.$route.params.num,
      hellHead: true,
      taocan: '#icon-tingzhenqi1',
      tingzhengqi: '#icon-wenhao',
      img: [
        {id: 1, name: 'static/img/er.jpg'},
        {id: 2, name: 'static/img/qweqweq.webp'},
        {id: 3, name: 'static/img/sd.webp'}
      ],
      number: 0,
      shu: 0,
      subscribe: {}
    }
  },
  components: {
    Package,
    Examination
  },
  methods: {
    // 组件切换
    show () {
      this.param = false
      this.hellHead = false
    },

    // 查询套餐
    initProTaoCan () {
      this.$axios.post(`/api/BespeakSetMeal/BespeakSet/${this.number}`).then(result => {
        this.subscribe = result.data
      })
    },

    // 查询总共多少体检项目 BespeakPojectType
    initProCount () {
      this.$axios.post(`/api/BespeakPojectType/ProBeakCount/${this.number}`).then(result => {
        this.shu = result.data
      })
    },

    // 预约须知
    yuyue () {
      this.$router.push('/dmission/' + this.mid + '/' + this.bid)
    }
  },
  created () {
    this.number = this.$route.params.id
    this.initProTaoCan()
    this.initProCount()
  }
}
</script>

<style>
 .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .helld-first{width:1380px;height:200px;position: absolute;top: 450px;left: 80px;}

  .helld-fast{position: absolute;top: 600px;left: 110px;cursor: pointer;}

  .helld-last{width: 1560.77px;height:200.57px; background-color: #f3f2f7;position: absolute;top: 630px;}

  .helld-last div{background-color: white;width: 1560.77px;height: 120px;position: absolute;top: 39px;}
  .helld-last div span{position: absolute;top: 50px;left: 140px;}

  .helld-mo{position: absolute;top: 830px;width: 1530.77px;}

  .helld-clause{width:1530.77px;height:150px;position: absolute;top: 1462px;}
  .icon{width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
  .myIcomp{font-size: 20px;}
  .helld-header{position: absolute;top:0px;width:1560.77px ;height: 25px;background-color: darkgrey;}
/* 去掉滚动条 */
   ::-webkit-scrollbar {width: 0 !important;}
   ::-webkit-scrollbar {width: 0 !important;height: 0;}

.frist_show{position: absolute;top: 0px;left:20px;width: 1500px;height: 50px;}

.frist_show .el-breadcrumb{margin-top: 15px;}

.liji:hover{color: DeepSkyBlue;}
</style>
